<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover" name="viewport" />
    <title>话题列表</title>
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.1/weui.min.css">
    <style>
        .show_content_p {
            padding: 20px 0;
        }
        .hidden_content_p{
            padding: 20px 0;
            display: none;
        }
        #ft_button{
            border: 0px solid red;
            position: fixed;
            bottom: 0;
            width: 100vw;
            background-color: gray;
            color: #fff;
        }

        #ft_button_2{
            height: 100px;
            border: 0px solid red;
        }
    </style>
</head>
<body>

<div class="page__bd">
    <!--<a href="javascript:" class="weui-btn weui-btn_primary">点击展现searchBar</a>-->
    <div class="weui-search-bar" id="searchBar">
        <form class="weui-search-bar__form">
            <div class="weui-search-bar__box">
                <i class="weui-icon-search"></i>
                <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
                <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
            </div>
            <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px; opacity: 1; transform: scale(1, 1);">
                <i class="weui-icon-search"></i>
                <span>搜索</span>
            </label>
        </form>
        <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
    </div>

</div>

<div class="weui-panel weui-panel_access">

    <div class="weui-panel__bd container" limit="5" offset="0" is_end="0">

<!--        <div class="weui-media-box weui-media-box_text">-->
<!--            <h4 class="weui-media-box__title">标题一</h4>-->
<!--            <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>-->
<!--            <ul class="weui-media-box__info">-->
<!--                <li class="weui-media-box__info__meta">文字来源</li>-->
<!--                <li class="weui-media-box__info__meta">时间</li>-->
<!--                <li class="weui-media-box__info__meta weui-media-box__info__meta_extra">其它信息</li>-->
<!--            </ul>-->
<!--        </div>-->

<!--        <div class="weui-media-box weui-media-box_text">-->
<!--            <h4 class="weui-media-box__title">标题一</h4>-->
<!--            <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>-->
<!--            <ul class="weui-media-box__info">-->
<!--                <li class="weui-media-box__info__meta">文字来源</li>-->
<!--                <li class="weui-media-box__info__meta">时间</li>-->
<!--                <li class="weui-media-box__info__meta weui-media-box__info__meta_extra">其它信息</li>-->
<!--            </ul>-->
<!--        </div>-->

    </div>

    <script type="text/x-dot-template" id="topicsTemplate">
        {{~it:value:index}}
        <div class="weui-media-box weui-media-box_text">
            <h4 class="weui-media-box__title" onclick="fnOpenTopicShowPage('{{=value.id}}');">{{=value.id}}、{{=value.title}}</h4>
            <p class="weui-media-box__desc show_content_p" id="show_content_p_{{=value.id}}" onclick="fnShowContent('{{=value.id}}');">展开答案</p>
            <div class="weui-media-box__desc" id="content_p_{{=value.id}}" style="display: none;">{{=value.content}}</div>
<!--            <p class="weui-media-box__desc" id="content_p" style="display: none;"></p>-->
            <p class="weui-media-box__desc hidden_content_p" id="hidden_content_p_{{=value.id}}" onclick="fnHiddenContent('{{=value.id}}');">收起答案</p>
            <ul class="weui-media-box__info">
                <li class="weui-media-box__info__meta">{{=value.created_at}}</li>
                <li class="weui-media-box__info__meta weui-media-box__info__meta_extra">阅读{{=value.read_count}}</li>
                <li class="weui-media-box__info__meta weui-media-box__info__meta_extra">赞{{=value.like_count}}</li>
                <li class="weui-media-box__info__meta weui-media-box__info__meta_extra">评论{{=value.reply_count}}</li>
            </ul>
        </div>
        {{~}}
    </script>

    <div class="weui-panel__ft" onclick="fnGetTopics();" style="display: none;">
        <a href="javascript:" class="weui-cell weui-cell_active weui-cell_access weui-cell_link">
            <div class="weui-cell__bd" id="ft_div">查看更多</div>
            <span class="weui-cell__ft"></span>
        </a>
    </div>
</div>

<a href="javascript:" class="weui-btn_cell weui-btn_cell-primary" id="ft_button" onclick="fnOpenTopicAddPage();">
    <img class="weui-btn_cell__icon" src="../images/pinglun-128-128.png">
    我要发布话题
</a>

<div id="ft_button_2"></div>

</body>

<script type="text/javascript" src="../js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="../js/doT.min.js"></script>
<script type="text/javascript" src="../js/common.js"></script>

<script type="text/javascript" class="searchbar js_show">
    $(function(){
        var $searchBar = $('#searchBar'),
            $searchResult = $('#searchResult'),
            $searchText = $('#searchText'),
            $searchInput = $('#searchInput'),
            $searchClear = $('#searchClear'),
            $searchCancel = $('#searchCancel');

        function hideSearchResult(){
            $searchResult.hide();
            $searchInput.val('');
        }
        function cancelSearch(){
            hideSearchResult();
            $searchBar.removeClass('weui-search-bar_focusing');
            $searchText.show();
        }

        $searchText.on('click', function(){
            $searchBar.addClass('weui-search-bar_focusing');
            $searchInput.focus();
        });
        $searchInput
            .on('blur', function () {
                if(!this.value.length) cancelSearch();
            })
            .on('input', function(){
                if(this.value.length) {
                    $searchResult.show();
                } else {
                    $searchResult.hide();
                }
                fnSearTopics();
            })
        ;
        $searchClear.on('click', function(){
            hideSearchResult();
            $searchInput.focus();
        });
        $searchCancel.on('click', function(){
            cancelSearch();
            $searchInput.blur();
        });
    });
</script>


<script type="text/javascript">

    $(document).ready(function(){

        fnGetTopics();

        // 触底加载
        $(window).scroll(function () {
            var scrollTop = $(this).scrollTop();
            var windowHeight = $(this).height();
            var scrollHeight = $(document).height();
            // console.log(scrollTop, windowHeight, scrollHeight);
            if (scrollTop + windowHeight == scrollHeight) {
                // 此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
                // fnGetTopics();
            }
        });

    });

    function fnOpenTopicAddPage() {
        window.location.href = './add.html';
    }

    function fnShowContent(id) {
        $('#show_content_p_' + id).hide();
        $('#content_p_' + id).show();
        $('#hidden_content_p_' + id).show();
    }

    function fnHiddenContent(id) {
        $('#show_content_p_' + id).show();
        $('#content_p_' + id).hide();
        $('#hidden_content_p_' + id).hide();
    }

    function fnOpenTopicShowPage(id) {
        window.location.href = './show.html?id=' + id;
    }

    function fnSearTopics() {

        $('.container').attr('offset', 0);
        $('.container').attr('is_end', '0');
        fnGetTopics();

    }

    function fnGetTopics() {

        var search_word = $('input').val();
        var limit = $('.container').attr('limit');
        var offset = $('.container').attr('offset');
        var is_end = $('.container').attr('is_end');

        if (is_end == 1) return false;

        $.ajax({
            url: base_request_url + 'topics',
            type: 'get',
            data:{limit: limit, offset: offset, search_word: search_word},
            success: function (res) {
                // console.log(res);

                $('.container').attr('offset', res.meta.offset);

                if (res.meta.limit > res.data.length) {
                    $('.container').attr('is_end', '1');
                    $('#ft_div').text('已全部加载！');
                }

                var html = '';
                if (res.data.length > 0) {
                    var tmpltxt = doT.template(document.getElementById("topicsTemplate").innerHTML);//生成模板方法
                    html = tmpltxt(res.data); // 数据渲染
                    $('.weui-panel__ft').show();
                }

                if (offset == 0) {
                    $('.container').html(html)
                } else {
                    $('.container').append(html)
                }

            }
        })

    }
</script>


</html>
